<template>
  <div class="indexContainer">
       <img v-if="isShow" class="index_img"  :src="userInfo.avatarUrl" alt="">
       <Button class="btn"  v-else open-type="getUserInfo" @getuserinfo="getUserInfo">点击获取用户登录信息</Button>
       <p  class="userName">hello {{userInfo.nickName}}</p>
       <div @tap="toDetail" class="goStudy">
            <p @tap="handleChild">开启小程序之旅{{newf}}</p>
       </div>
  </div>
</template>

<script>
export default {
data(){
    return{
      newf:'新数据',
      userInfo:{},
      isShow:false//用户没有授权
    }
     },
     methods:{
       handleChild(){
          console.log("handdlechild")
       },
       toDetail(){
           console.log('todetail')
           wx.switchTab({url:'/pages/list/main'})
       },
       getUserInfo(data){
          console.log("=========="+data)
          if(data.mp.detail.rawData){
             //用户授权
             this.handleGetUserInfo()
             
          }
       },
       //获取用户登录信息
       handleGetUserInfo(){
            //获取用户登录信息
            wx.getUserInfo({
              success:(data)=>{
                console.log(data)
                this.userInfo=data.userInfo
                this.isShow=true
              },
              fail:()=>{
                console.log('获取失败')
                this.isShow=false
              }
            })
       }
     },
    onLoad(){
      console.log('------onLoad')
    },
    beforeMount(){
      console.log('------beforeMount')
      this.handleGetUserInfo()
    },
    mounted(){
      console.log('------mounted')
      
    }
}
</script>

<style  >
   page{
     background: red
   }
  .indexContainer{
     display: flex;
     flex-direction: column;
     align-items: center;
  }
  .index_img{
    width: 200px;
    height: 200px;
    border-radius: 100rpx;
    margin: 100rpx;
  }
  .userName{
    font-size: 40px;
    font-weight: bold;
    margin: 100rpx 0;
  }
  .goStudy{
     width: 220rpx;
     height: 80rpx;
     border: 1rpx solid #eee;
     font-size: 24rpx;
     line-height: 80rpx;
     text-align: center;
     border-radius: 10rpx;
  }
  .btn{
    width: 300rpx;
    height: 300rpx;
    border-radius: 150rpx;
    margin: 50rpx 0;
    line-height: 300rpx;
    text-align: center;
  }
</style>